<template>
  <div class="list-box">
     <div class="list">
                <div v-show="del" class="lis" v-for="(item,index) in this.$store.state.list" :key="index" :class="{unfinished:item.status==false}">
                    <div>
                        <input type="checkbox" @click="changeStatus(item)" :checked="item.status">
                        <span>{{item.id}}</span>
                        <p>{{item.name}}</p>
                    </div>
                    <span @click="del(index)">删除</span>
                </div>
     </div>
            <div class="text" v-show="this.$store.state.list.length==0">任务列表为空,请添加任务吧^_^</div>
  </div>
</template>

<script>
export default {
  methods:{
    changeStatus(item){
        item.status = !item.status;
    },
    del(index){
        this.$store.state.list.splice(index, 1)
    }
  }
}
</script>

<style lang="scss" scoped>
.list-box{
    box-sizing: border-box;
    padding: 0 10px;
   .list {
     box-sizing: border-box;
   }
   .lis {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: lightseagreen;
            margin: 10px 0;
            color: #eee;
        }
        
        .list .lis.unfinished {
            background-color: red;
        }
        
        .list .lis div {
            display: flex;
            align-items: center;
        }
        
        .list .lis div span {
            margin: 0 15px;
        }
        
        .text {
            text-align: center;
            padding: 50px 0;
        } 
}
</style>